<template>
    <div class="withdraw">
        <div class="header">
            <router-link to="/my-income" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">申请提现</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h120"></div>
        <div class="list">
            <form @submit.prevent="formSubmit">
                <div class="list-title">提现金额</div>
                <div class="list-item">
                    <div class="list-item-title">￥</div>
                    <div class="list-item-input">
                        <input name="name1" @input="totalFn"  type="text" maxlength="11" v-model="request_money"/>
                    </div>
                </div>
                <div class="list-item">
                    <div class="list-item-tips">当前可提现 {{member_money_max}} 元</div>
                </div>
                <div class="incomeSubmit">
                    <input type="submit" class="incomeSubmit-btn" name="提交" />
                </div>
            </form>
        </div>


    </div>
</template>

<script>
    import { Toast,MessageBox  } from 'mint-ui';
    import config from '../store/config';
    import wxShare from "../store/wxShare"
    export default {
        name: "My-income-auth",
        data() {
            return {
                member_money:0,
                member_money_max:0,
                request_money:0
            }
        },
        methods: {
            formSubmit: function () {
                var _that = this;
                if (_that.member_money<100) {
                    Toast({message:'金额大于100才能发起提现！', duration: 1000});
                    return false;
                }
                _that.axios.post('rutforward',{money:_that.request_money})
                    .then(res => {
                        Toast({message:'提现申请提交成功，请等待后台处理', duration: 3000});
                        setTimeout(()=>{
                            _that.$router.push('./my-income')
                        },1500)
                    })
                    .catch(err => console.log(err));
            },
            totalFn(){
                if(this.request_money>this.member_money){
                    Toast({message:'提现金额不能大于可提现金额', duration: 1000});
                    this.request_money=this.member_money;
                }
                this.member_money_max= (this.member_money-this.request_money).toFixed(2)
            },
            getMoney(){
                this.axios.post('profit')
                    .then(res => {
                        this.member_money= this.member_money_max=res.data.member_money
                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({title: '我的收益-申请提现', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted(){
            this.getMoney();
            this.share();
        }
    }
</script>

<style lang="scss" scoped>

    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }

    .withdraw{
        background: $bgcolor1;
        height: 100%;
    }

    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }

    }



    //项列表
    .withdraw .list {
        margin: rpx(30);
        &-title {
            padding: rpx(40) rpx(30);
            background: $color0;
            font-size: rpx(34);
            color: $color5;
            border-bottom: solid 1px $color2;
        }
        &-item {
            display: flex;
            align-items: center;
            overflow: hidden;
            background: $color0;
            padding:rpx(35) rpx(30);
            &-tips {
                color: #999;
                font-size: rpx(30);
            }
            &-title {
                width: rpx(80);
                font-size: rpx(60);
                &.desc{
                    width: auto;
                    font-size: rpx(34);
                    color: $color5;

                }
            }
            &-input {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: rpx(60);
                input{
                    font-size: rpx(60);
                }
            }
        }
    }
    .withdraw .incomeSubmit{
        padding: rpx(80) rpx(30) rpx(30);
        &-btn{
            display: block;
            width: 100%;
            height: rpx(80);
            line-height: rpx(80);
            background: $color3;
            border-radius: $radius6;
            color: $color0;
            font-size: rpx(34);
            text-align: center;
        }
    }



</style>